<template>
	<view class="content">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">{{$t('approval').toDoList}}</text></block>
		</cu-custom>

		<view v-for="(item,index) in approvals" :key="index" class="approval-item" @click="onItemClick(item.id,item.apptype)">
			<!-- apptype == 1为请假 -->
			<view v-if="item.apptype == '1'" class="top solid-bottom">
				<view class="title">{{item.username}} {{$t('approval').whoSubmit}}</view>
				<view class="content">{{$t('approval').typeLeave}}:<text class="text-black">{{' '+item.vname}}</text></view>
				<view class="content">{{$t('approval').sTime}}:<text class="text-black">{{' '+DateFormat(item.leavestime.time,item.vminimum,item.lstime)}}</text></view>
			</view>

			<view v-else-if="item.apptype == '2'" class="top solid-bottom">
				<view class="title">{{item.username}} {{$t('repair').whoSubmit}}</view>
				<view class="content">{{$t('repair').repairReason}}: <text class="text-black">{{' '+item.goreason}}</text></view>
				<view class="text-gray text-sm">{{$t('repair').repairTime}}: <text class="text-black">{{' '+DateFormat(item.leavestime.time,'3','0')}}</text></view>
			</view>

			<view v-else-if="item.apptype == '3'" class="top solid-bottom">
				<view class="title">{{item.username}} {{$t('travelRecord').howSubmit}}</view>
				<view class="content">{{$t('travel').reason}}: <text class="text-black">{{' '+item.goreason}}</text></view>
				<view class="content">{{$t('travel').address}}: <text class="text-black">{{' '+item.aimland}}</text></view>
				<view class="content">{{$t('approval').sTime}}: <text class="text-black">{{' '+DateFormat(item.leavestime.time,item.vminimum,item.lstime)}}</text></view>
			</view>
			
			<view v-else-if="item.apptype == '4'" class="top solid-bottom">
				<view class="title">{{item.username}} {{$t('visitor').whoSubmit}}</view>
				<view class="content">{{$t('visitor').reason}}: <text class="text-black">{{' '+item.goreason}}</text></view>
				<block v-if="item.leavestime!=null">
				<view class="content">{{$t('approval').sTime}}: <text class="text-black">{{' '+DateFormat(item.leavestime.time,item.vminimum,item.lstime)}}</text></view>
				</block>
				<block v-if="item.leavestime!=null">
				<view class="content">{{$t('approval').eTime}}: <text class="text-black">{{' '+DateFormat(item.leaveetime.time,item.vminimum,item.letime)}}</text></view>
				</block>
			</view>
			

			<view class="bottom">
				<view>{{DateFormat(item.create_date.time)}}</view>
				<view class="action">
					<text @click.stop="submit(item.appid,2,index)" class="text-blue">{{$t('approval').refuse}}</text>
					<text style="margin: 0upx 30upx;">|</text>
					<text @click.stop="submit(item.appid,0,index)" class="text-blue">{{$t('approval').agree}}</text></view>
			</view>
		</view>
		<no-more :show="!approvals.length>0" :text="$t('approval').noToDo"></no-more>
		<uni-load-more :status="status" :size="5" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	var utils = require('@/common/utils.js');
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				loadding: '',
				approvals: [],
				page: 1,
				rows: 20,
				reload: false, //是否重新加载
				status: 'more',
				contentText: {
					// contentdown: '上拉加载更多',
					contentrefresh: this.$t('loading')
				}
			}
		},
		onLoad() {
			this.$constant.checkUserInfo()
		},
		onShow() {
			uni.showLoading({
				title: this.$t('loading')
			})
			this.GetData()
		},
		onReachBottom() {
			if (this.status == 'noMore') return
			this.status = 'more';
			this.GetData()
		},
		methods: {
			GetData() {
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_APPROVAL_PENDING,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						userid: getApp().globalData.userid,
						page: this.page,
						rows: this.rows
					},
					complete() {
						uni.hideLoading()
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 0) {
							let list = res.data.data
							if (list.length > 0) {
								this.approvals = this.reload ? list : this.approvals.concat(list)
								this.page++;
								this.reload = false;
								//当请求的数据少于rows说明已经没有更多了，不需要再重新请求了
								if (list.length < this.rows) {
									this.status = 'noMore'
								}
							} else {
								this.status = 'noMore'
							}
						} else {
							uni.showModal({
								content: res.data.message,
								showCancel: false,
								cancelText: this.$t('sure'),
								confirmText: this.$t('cancel')
							})
						}
					}
				})
			},
			onItemClick(id, apptype) {
				//1表示请假，跳转到请假详情
				if (apptype == '1') {
					uni.navigateTo({
						url: `../../index/leave/leavedetails?leaveid=${id}`
					})
				}
				//3表示出差
				if (apptype == '3') {
					uni.navigateTo({
						url: `../../index/business-travel/business-travel-details?leaveid=${id}`
					})
				}
				if (apptype == '2') {
					uni.navigateTo({
						url: `../../index/attendance/repair-detail?leaveid=${id}`
					})
				}
				if(apptype == '4'){
					uni.navigateTo({
						url: `../../visitor/visitor-detail?leaveid=${id}`
					})
				}
			},
			submit(id, appstatus, index) {
				//审批
				uni.showLoading({
					title: this.$t('approval').inProgress
				})
				// console.log('id = ',id)
				uni.request({
					url: this.$constant.BASEURL + this.$constant.SUBMIT_APPROVAL,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: id,
						appstatus: appstatus,
					},
					complete: (res) => {
						uni.hideLoading()
						// console.log('success',res)
						if (res.data.code == 0) {
							uni.showToast({
								title: appstatus == 0 ? this.$t('approval').ageed : this.$t('approval').declined
							})
							this.approvals.splice(index, 1)
						} else {
							uni.showModal({
								content: res.data.message,
								showCancel: false
							})
						}
					}
				})
			},
			DateFormat(timestamp, vminimum, stime) {
				console.log(this.$_i18n.locale)
				return utils.DateFormat(timestamp, vminimum, stime,this.$_i18n.locale)
			}
		}
	}
</script>

<style>
	.approval-item {
		border-radius: 20upx;
		margin: 0upx 30upx;
		margin-top: 25upx;
		background-color: #ffffff;
		min-height: 280upx;
	}

	.approval-item .title {
		padding-bottom: 10upx;
		font-size: 35upx;
		font-weight: bold;
	}

	.approval-item .content {
		color: #AAAAAA;
		padding-top: 10upx;
		font-size: 26upx;
	}

	.approval-item .top {
		padding: 25upx 25upx;
	}

	.approval-item .bottom {
		padding: 0upx 25upx;
		min-height: 80upx;
		color: #DADADA;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.approval-item .bottom .action {
		display: flex;
	}
</style>
